<template>
  <div>

    <div class="centerTable">
      <el-table :data="tableData" border
                height="calc(100vh - 230px)"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
        <el-table-column label="序号" type="index" width="60px"></el-table-column>
        <el-table-column label="新员工人数" prop="newNum"></el-table-column>
        <el-table-column label="新员工对应提成金额" prop="newCommissionRatio"></el-table-column>
        <el-table-column label="老员工人员" prop="oldNum"></el-table-column>
        <el-table-column label="老员工对应提成金额" prop="oldCommissionRatio"></el-table-column>
        <el-table-column label="总人数" prop="totalNum"></el-table-column>
        <el-table-column label='操作'>
          <template v-slot:default="scope">
            <el-link type="primary" @click="_edit(scope.row)" style="margin-right: 15px">修改提成占比</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="editDialog" title="修改提成占比" width="35%" center>
      <div class="bodex">
        <p><span>新员工人数：</span>
          <el-input size="small" style="width: 250px;" v-model="editData.newNum" :disabled="true"></el-input>
        </p>
        <p><span>新员工提成占比：</span>
          <el-input size="small" style="width: 250px;" v-model="editData.newCommissionRatio"></el-input>
        </p>
        <p><span>老员工人数：</span>
          <el-input size="small" style="width: 250px;" v-model="editData.oldNum" :disabled="true"></el-input>
        </p>
        <p><span>新员工提成占比：</span>
          <el-input size="small" style="width: 250px;" v-model="editData.oldCommissionRatio"></el-input>
        </p>
      </div>
      <span slot="footer">
        <el-button size="small" type="info" @click="editDialog=false">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "oldPlusNew",
  data() {
    return {
      tableData: [],
      editData: {},
      editDialog: false,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.$api.oldByNewConfigGetOldByNewConfig({pageNumber: 1, pageSize: 100}).then(res => {
        this.tableData = res
      })
    },
    _edit(row) {
      this.editId = row.id
      this.editDialog = true
      this.editData = JSON.parse(JSON.stringify(row))
    },
    submit() {
      const data = {
        id: this.editId,
        oldCommissionRatio: this.editData.oldCommissionRatio,
        newCommissionRatio: this.editData.newCommissionRatio,
      }
      this.$api.oldByNewConfigUpdateOldByNewConfig(data).then(res => {
        if (res) {
          this.$message.success(`res`)
          this.editDialog = false
          this.getData()
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.bodex {
  display: flex;
  flex-direction: column;
  align-items: center;

  p {
    margin-bottom: 15px;
  }

  span {
    display: inline-block;
    width: 120px;
  }
}
</style>